// nprogress进度条插件: 下载=>导入
import router, { asyncRoutes } from '@/router'
import store from './store'
import nprogress from 'nprogress' // nprogress.start() 开启  nprogress.done() 结束进度条
import 'nprogress/nprogress.css' // 进度条的样式

const WHITE_LIST = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  nprogress.start() // 进入页面前开启进度条

  if (store.getters.token) {
    // next()
    // 提升用户体验 有token 无需去login
    if (to.path === '/login') {
      next('/') // 拦截
      nprogress.done()
    } else {
      // 在哪里请求 一定是拿到用户数据了 再进入页面 => 在前置守卫中发请求 必须响应回来了 再  next()

      // 这里发请求 这里有token+这里他想进系统
      // 如果已经存在用户数据了 没必要发请求; 只有在没有数据的情况下 发请求
      // if (!store.state.user.userInfo.userId) await store.dispatch('user/getUserInfo') // 必须等数据回来了  再放行(用户信息决定了页面的展示)
      // // 必须等数据回来了  再放行(用户信息决定了页面的展示)
      if (!store.getters.userId) {
        const res = await store.dispatch('user/getUserInfo')
        console.log('用户的页面权限:', res.roles.menus, asyncRoutes)
        // 到了这里 我已经拿到了用户信息
        // 添加路由规则了 => 我知道用户能看哪些页面
        // asyncRoutes中的每一项的path.slice(1) 如果在menus中能找到 就得留下!!! => arr.includes(1)
        const filterRoutes = asyncRoutes.filter(item => res.roles.menus.includes(item.path.slice(1)))
        console.log('过滤好的路由规则', filterRoutes)
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true }) // *规则必须放在所有规则的最后
        store.commit('user/setRoutes', filterRoutes) // 更新仓库中的路由规则数据(静态+动态)
        // 整个项目中唯一的这个路由实例router 不停的被添加规则 => 哪怕是一个新用户  只要他是最后一个登录的 那么他也会拥有之前所有用户的规则
        router.addRoutes(filterRoutes) // 就先当是管理员(降低难度)  addRoutes 是异步的操作 此刻添加的规则不会立即生效 => 成熟的解决方案 重进一次系统
        next(to.path) // 专门用于解决路由规则不能立即生效的问题
        return
      }
      next()
    }
  } else {
    if (WHITE_LIST.includes(to.path)) {
      next()
    } else {
      next({ path: '/login' }) // 拦截
      nprogress.done()
    }
  }
})

// 细节: 只要前置守卫中出现了拦截 那么后置守卫根本不执行 => 手动关闭
// 后置守卫 页面解析渲染完成后触发(你看到了那个原本去的页面后触发)
router.afterEach((to, from) => {
  // 关闭进度条
  nprogress.done()
})
